<template>
    <div>
        支出账户：
        <el-select v-model="qo.accounts" multiple collapse-tags collapse-tags-tooltip :max-collapse-tags="2" placeholder="请选择"
            style="width: 260px">
            <el-option v-for="item in accountType" :key="item.value" :label="item.name" :value="item.value" />
        </el-select>

        <span class="demonstration">开始日期</span>
        <el-date-picker
            v-model="qo.expenditureDateStart"
            type="date"
            placeholder="Pick a day"
            :disabled-date="disabledDate"
            :shortcuts="shortcuts"
            :size="size"
        />
        <span class="demonstration">结束日期</span>
        <el-date-picker
            v-model="qo.expenditureDateEnd"
            type="date"
            placeholder="Pick a day"
            :disabled-date="disabledDate"
            :shortcuts="shortcuts"
            :size="size"
        />
    </div>

    <div>
        <el-button type="success" @click="addUpdateDialog('add',{})">新增</el-button>
        <el-button type="success" @click="expenditureList">查询</el-button>
    </div>

    <div>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="secondName" label="二级支出" width="180" />
            <el-table-column prop="money" label="金额" width="180" sortable />
            <el-table-column prop="monthlyAverage" label="月平均" />
            <el-table-column prop="account" label="账户" />
            <el-table-column prop="remarks" label="备注" />
            <el-table-column fixed="left" label="操作" width="120">
                <template v-slot:default="scope">
                    <el-button link type="primary" size="small" 
                        @click="detailDialog(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <div class="demo-pagination-block" style="">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[100, 200, 300, 400]"
            :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
            :total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>


    <el-dialog v-model="detailDialogVIF" title="Notice" width="80%" 
        destroy-on-close center draggable>
        <el-table :data="detailData" stripe style="width: 100%">
            <el-table-column prop="expenditureDate" :formatter="formatterDate" label="支出日期" width="180" />
            <el-table-column prop="secondName" label="二级支出" width="180" />
            <el-table-column prop="money" label="金额" width="180" />
            <el-table-column prop="accountName" label="账户" />
            <el-table-column prop="remarks" label="备注" />
        </el-table>
    </el-dialog>

</template>
<script>
import { reactive, toRefs, onBeforeMount } from 'vue'

import { expenditure, addExpenditre, updateExpenditre, groupList } from '../../api/finance.js'
import { $dictionaryList,$listCascade } from '../../api/dictionary.js'

export default {
    name: 'finance',
    setup() {
        let data = reactive({
            tableData: [],
            detailData:[],
            pageSize: 100,
            currentPage: 1,
            qo: {expenditureDateStart:new Date('2024/01/01'),expenditureDateEnd:new Date()},
            addAndUpdataDialogVisible: false,
            detailDialogVIF:false,
            addAndUpdataType:'',
            form: {},
            accountType:[],
            expenditureType:[],
            options: [
                {
                    value: 'Option1',
                    label: 'Option1',
                }
            ],
            shortcuts:[
                {
                    text: '今天',
                    value: new Date(),
                },
                {
                    text: '昨天',
                    value: () => {
                    const date = new Date()
                    date.setTime(date.getTime() - 3600 * 1000 * 24)
                    return date
                    },
                },
                {
                    text: '一周前',
                    value: () => {
                    const date = new Date()
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                        return date
                    },
                },{
                    text: '本月1号',
                    value: () => {
                        const date = new Date()
                        date.setDate(1)
                        return date
                    },
                }
            ]
        })

        let detailDialog = (row) => {
            data.detailDialogVIF = true
            expenditureDetail({
                secondItems:[row.secondItem]
                ,expenditureDateStart:data.qo.expenditureDateStart
                ,expenditureDateEnd:data.qo.expenditureDateEnd
            })
        }

        let expenditureDetail = async (form)=>{
            data.detailData = await expenditure(form)
        }

        let dictionaryList = async () => {
            data.accountType = await $dictionaryList({ type: "account_type" })
        }
        dictionaryList()
        
        let listCascade = async () => {
            data.expenditureType = await $listCascade({type: "expenditure_type"})
        }
        listCascade()
        
        let expenditureList = async () => {
            data.tableData = await groupList({ 
                pageSize: data.pageSize, 
                currentPage: data.currentPage, 
                expenditureDateStart:data.qo.expenditureDateStart
                ,expenditureDateEnd: data.qo.expenditureDateEnd 
            })
        }
        expenditureList()

        const handleSizeChange = (number) => {
            data.pageSize = number
            expenditureList()
        }
        const handleCurrentChange = (number) => {
            data.currentPage = number
            expenditureList()
        }

        return {
            ...toRefs(data),
            expenditureList,
            detailDialog,
            handleSizeChange,
            handleCurrentChange,
            expenditureDetail
        }
    }
}
</script>
<style scoped lang='scss'></style>
